<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试Ajax-前后端通信</title>
    <meta charset="UTF-8">
    <script>

        // function ajax1() {
        //     alert(111)
        //     let show = document.querySelector(".show");
        //     let name = document.querySelector(".name").value;
        //     let password = document.querySelector(".password").value;
        //     //通过ajax向服务端请求数据
        //     // 1.实例化一个ajax交流对象
        //     let xmlHttp = new XMLHttpRequest();
        //     //2.判断状态 监听返回的数据 4 200
        //     xmlHttp.onreadystatechange = function () {
        //         // 3.响应数据成功
        //         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        //             //4写入数据
        //             let data = xmlHttp.responseText;
        //             show.innerHTML = data;
        //         }
        //     }
        //     //以GET方式向服务器接口Ajax发出异步器请求
        //     xmlHttp.open("get", '/lodinweb1_0_war_exploded/ajax?name=' + name + '&password=' + password, true)
        //     //发射
        //     xmlHttp.send();
        // }
        window.onload = function () {
            let btn = document.querySelector(".btn");
            let show = document.querySelector(".show");
            btn.onclick = function () {
                let name = document.querySelector(".name").value;
                let password = document.querySelector(".password").value;
                //通过ajax向服务端请求数据
                //1.实例化一个ajax交流对象
                let xmlHttp = new XMLHttpRequest();
                //3.判断状态 监听返回的数据 4 200
                xmlHttp.onreadystatechange = function () {
                    //4.响应数据成功
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        //5.写入数据
                        let data = xmlHttp.responseText;
                        show.innerHTML = data;
                    }
                }
                //2.以get方式向服务器接口ajaxInfo发出异步请求
                xmlHttp.open("get", '/lodinweb1_0_war_exploded/ajax?name=' + name + '&password=' + password, true);
                //4.发射
                xmlHttp.send();
            }
        }
    </script>
</head>
<body>
<div class="show">
    欢迎后端数据
</div>
<form action="">
    姓名：
    <input type="text" class="name"><br>
    密码
    <input type="text" class="password"><br>
    <button type="button" onclick="ajax1()" class="btn"> 提交</button>
</form>
</body>
</html>